---
title: Color
sidebar_position: 1
---

### The Theme Object

By default, the theme object looks like this. You can add whatever values you
want to the theme, and they will be merged with the default. By default the
platform colors aren't used anywhere. These native colors are added for
your convenience.

```tsx
interface theme {
  colors: {
    primary;
    secondary;
    white;
    black;
    grey0;
    grey1;
    grey2;
    grey3;
    grey4;
    grey5;
    greyOutline;
    searchBg;
    success;
    error;
    warning;
    divider;
    platform: {
      ios: {
        primary;
        secondary;
        grey;
        searchBg;
        success;
        error;
        warning;
      };
      android: {
        // Same as ios
      };
      web: {
        // Same as ios
      };
    };
  };
}
```

Setting styles in the theme is as simple as using the name of the component, as
a key and the props you want to change as the value.

```jsx
import { ThemeProvider, createTheme } from '@react-native-elements/themed';

const theme = createTheme({
  color: {
    primary: '#e7e7e8',
  },
});

const App = () => {
  return (
    <ThemeProvider theme={theme}>
      {/* ... */}
      {/* ... */}
    </ThemeProvider>
  );
};
```

### Using the respective platform's native colors

You may want to style your app using the native color palette. You can do this
using the `colors` object and the `Platform` API.

```jsx
import { Platform } from 'react-native';
import {
  Button,
  colors,
  createTheme,
  ThemeProvider,
} from '@react-native-elements/themed';

const theme = createTheme({
  colors: {
    ...Platform.select({
      default: colors.platform.android,
      ios: colors.platform.ios,
    }),
  },
});

const App = () => {
  return (
    <ThemeProvider theme={theme}>
      {/* This button's color will now be the default iOS / Android blue. */}
      <Button title="My Button" />
    </ThemeProvider>
  );
};
```

---
